import React, { useState } from 'react'
import './headerStyle.scss'
import { NavBar, Space, Toast } from 'antd-mobile'
import Icon from '@/components/Icon'
import {useNavigate} from 'umi'
import DetailTabBar from './DetailTabBar/index'
export default function headerDetail() {
  const navigate = useNavigate()
  const [isShow,setIsShow] = useState(false)
  //控制DetailTabBar组件的显示隐藏
  const dblonClick = () => {
    setIsShow(!isShow)
   
  }
  //控制DetailTabBar组件的显示隐藏
 
  //右侧内容
    const right = ( 
        <div style={{ fontSize: 24 }}>
          <Space style={{ '--gap': '16px' }}>
<Icon name = "&#xe607;"  size={24} onClick= {() => {
dblonClick()
}}/>
          </Space>
        </div>
      )
//右侧内容

//点击返回区域后的回调
      const back = () =>{  
        navigate(-1)
      }

      //点击返回区域后的回调
     
  return (
    <div className='header_detail'>
         <NavBar right={right} onBack={back}>
          商品详情
        </NavBar>
        {
          isShow&&<DetailTabBar/>
        }
       
    </div>
  )
}
